import React from 'react'
import Child from './Child'
class Life extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count:0
    }
  }
  componentWillMount() {
    console.log('will mount');
  }
  componentDidMount() {
    console.log('did mount');
  }
  componentWillReceiveProps(props) {
    console.log('will receive ' + props);
  }
  shouldComponentUpdate(props) {
    console.log('should update ' + props);
    return true
  }
  componentWillUpdate(props) {
    console.log('will update ' + props);
  }
  componentDidUpdate() {
    console.log('did update');
  }
  componentWillUnmount() {
    console.log('will unmount');
  }
  handleAdd() {
    this.setState({
      count: this.state.count+1
    })
  }
  handleAddArrow = () => {
    this.setState({
      count: this.state.count+1
    })
  }
  render() {
    // style传入的是一个对象
    let style = {
      'color': 'red',
      'fontSize': '20px',
      'padding': '20px'
    }
    return <div style={style}>
      <p>{this.state.count}</p>
      {/* 不使用箭头函数定义handleAdd要绑定this否则handleAdd中的this不是组件的实例 */}
      <button onClick={this.handleAdd.bind(this)}>点击</button>
      {/* 使用箭头函数 继承父级的this 是组件的实例 */}
      <button onClick={this.handleAddArrow}>点击</button>
      <Child name={this.state.count}/>
    </div>
  }
}
export default Life